import React,{useContext} from 'react';
import { Input, Select, Space, DatePicker, Button } from 'antd';
import contextTodo from "../store/contextTodo"
import './Header.scss'



const Header = () => {

    let obj = {
        title:"",
        date:'',
        priority:''
    }
    

// select
const handleChange = (value) => {
    console.log(value);
    obj.priority = value
};
// input
const handleIpt = (value) => {
    obj.title = value.target.value

};
//日期选择器
const onChange = (date,dateString) => {
    obj.date = dateString 
};


let options=[
    {
        value: '1',
        label: '一级',
    },
    {
        value: '2',
        label: '二级',
    },
    {
        value: '3',
        label: '三级',
    },
]

const context=useContext(contextTodo)

    return (<>
        <div className='header'>
            <div>
                <span>日期：</span>
                <Space className='wid' direction="vertical">
                    <DatePicker className='wid' onChange={onChange} />
                </Space>
            </div>

            <div>
                <span>标题：</span>
                <Input className='wid' onChange={handleIpt} placeholder="请输入标题" />
            </div>

            <div>
                <span className='priority'>优先级:</span>
                <Space wrap >
                    <Select
                        defaultValue="1"
                        style={{
                            width: 240,
                        }}
                        onChange={handleChange}
                        options={options}
                    />
                </Space>
            </div>
            <Button type="primary" onClick={()=> context.updateList(obj)}>添加</Button>
        </div>

    </>);
}

export default Header;